<template>

	<view class="home">
		<view class="card-bottom">
			<hx-navbar title="文案助手" :fixed="true" :background-color="[[28, 187, 180],[141, 198, 63]]" color="#ffffff" />

			<!-- 顶部分页栏 -->
			<view class="top-tab">
				<view :class="['tab-item flex-center', 
				activeTab == index ? 'active' : '']" @tap="handleTab(index)" v-for="(item, index) in tabList"
				 :key="index">
					{{ item.title }}
				</view>
			</view>
			<y-Refresh ref="mixPulldownRefresh" :top="100" @refresh="onPulldownReresh">
				<view class="scroll-wrapper">
					<!-- 抖音文案 -->
					<view v-if="activeTab == 0">
						<view class="margin-bottom" v-for="(item, index) in cardList" :key="index">
							<view :class="['card-item',radius ? 'radius' : '']">
								<view class="item-head">
									<view class="left-info">
									<view class="img-wrap flex-center" @tap="toOthers(item.idcontent)">
										<image :src="item.music_pic" mode="widthFix" class="avatar"></image>
									</view>
										<view class="head-name">{{ item.title }}</view>
									</view>
								</view>
								<view class="content" @click="copy(item.title)">
									<view class="text-content">{{ item.content }}</view>

									<view class="bottom-btn padding-bottom-sm">
										<view class="btn-item flex-center" @click="copy(item.content)">
											<image class="img" src="../../static/img/diary/img_say.png" mode="widthFix"></image>

											<text>一键复制</text>
										</view>
										<view class="btn-item flex-center" @tap.stop @tap="handleLike(item)">
											<image class="img" v-if="!item.isLike" src="../../static/img/diary/img_zan.png" mode="widthFix"></image>
											<image class="img" v-else src="../../static/img/diary/img_zan_1.png" mode="widthFix"></image>
											<text>{{ item.likeNum }}</text>
										</view>
									</view>
								</view>

							</view>
							<view style="margin-top: 20px;" :class="['card-item',radius ? 'radius' : '']">
								<view class="item-head">
									<view class="left-info">
										<view class="img-wrap flex-center" @tap="toOthers(item.idcontent)">
											<image :src="item.music_pic" mode="widthFix" class="avatar"></image>
										</view>
										<view class="head-name">{{ item.commentNum }}</view>
									</view>
									<!-- 	<text class="color-nine">阅读量：66</text> -->
								</view>
								<view class="content" @tap="copy(item.content)">
									<view class="text-content">{{ item.content }}</view>

									<view class="bottom-btn padding-bottom-sm">
										<view class="btn-item flex-center" @click="copy(item.commentNum)">
											<image class="img" src="../../static/img/diary/img_say.png" mode="widthFix"></image>

											<text>一键复制</text>
										</view>
										<view class="btn-item flex-center" @tap.stop @tap="handleLike1(item)">
											<image class="img" v-if="!item.follow" src="../../static/img/diary/img_zan.png" mode="widthFix"></image>
											<image class="img" v-else src="../../static/img/diary/img_zan_1.png" mode="widthFix"></image>
											<text>{{ item.likeNum1}}</text>
										</view>
									</view>
								</view>



							</view>



						</view>
					<view class="adContainer" style="width: 100%;" >
					<ad unit-id="adunit-15ca454352b1e36b"  ad-intervals="30"></ad>
					</view>
					</view>
					<!-- 治愈唯美 -->
					<view v-else-if="activeTab == 1">
						<view class="margin-bottom" v-for="(item, index) in rightList" :key="item.id">
						<view :class="['card-item',radius ? 'radius' : '']">
								<view class="item-head">
									<view class="left-info">
										<view class="img-wrap flex-center" @tap="toOthers(item.idcontent)">
											<image :src="item.music_pic" mode="widthFix" class="avatar"></image>
										</view>
										<view class="head-name">{{ item.title }}</view>
									</view>		</view>
								<view class="content">
									<view class="text-content">{{ item.content }}</view>
									
									<view class="bottom-btn padding-bottom-sm">
										<view class="btn-item flex-center" @click="copy(item.title)">
											<image class="img" src="../../static/img/diary/img_say.png" mode="widthFix"></image>
									
										<text >一键复制</text>
										</view>
										<view class="btn-item flex-center" @tap.stop @tap="handleLike(item)">
											<image class="img" v-if="!item.isLike" src="../../static/img/diary/img_zan.png" mode="widthFix"></image>
											<image class="img" v-else src="../../static/img/diary/img_zan_1.png" mode="widthFix"></image>
											<text>{{ item.likeNum }}</text>
										</view>
									</view>
								</view>
							
							</view>
							<view style="margin-top: 20px;"  :class="['card-item',radius ? 'radius' : '']">
								<view class="item-head">
									<view class="left-info">
										<view class="img-wrap flex-center" @tap="toOthers(item.idcontent)">
											<image :src="item.music_pic" mode="widthFix" class="avatar"></image>
										</view>
										<view class="head-name">{{ item.commentNum }}</view>
									</view>
								<!-- 	<text class="color-nine">阅读量：66</text> -->
								</view>
								<view class="content" @tap="copy(item.content)">
									<view class="text-content">{{ item.content }}</view>
									
									<view class="bottom-btn padding-bottom-sm">
										<view class="btn-item flex-center" @click="copy(item.commentNum)">
											<image class="img" src="../../static/img/diary/img_say.png" mode="widthFix"></image>
									
										<text >一键复制</text>
										</view>
										<view class="btn-item flex-center" @tap.stop @tap="handleLike1(item)">
											<image class="img" v-if="!item.follow" src="../../static/img/diary/img_zan.png" mode="widthFix"></image>
											<image class="img" v-else src="../../static/img/diary/img_zan_1.png" mode="widthFix"></image>
											<text>{{ item.likeNum1}}</text>
										</view>
									</view>
								</view>
							
							
							
						</view>
						
						
						</view>
						<view class="adContainer" style="width: 100%;" >
						<ad unit-id="adunit-15ca454352b1e36b"  ad-intervals="30"></ad>
						</view>
					</view>
					<!-- 治愈唯美 -->
					<view v-else-if="activeTab == 2">
						<view class="margin-bottom" v-for="(item, index) in gxList" :key="item.id">
					<view :class="['card-item',radius ? 'radius' : '']">
							<view class="item-head">
								<view class="left-info">
									<view class="img-wrap flex-center" @tap="toOthers(item.idcontent)">
										<image :src="item.music_pic" mode="widthFix" class="avatar"></image>
									</view>
									<view class="head-name">{{ item.title }}</view>
								</view>		</view>
							<view class="content">
								<view class="text-content">{{ item.content }}</view>
								
								<view class="bottom-btn padding-bottom-sm">
									<view class="btn-item flex-center" @click="copy(item.title)">
										<image class="img" src="../../static/img/diary/img_say.png" mode="widthFix"></image>
								
									<text >一键复制</text>
									</view>
									<view class="btn-item flex-center" @tap.stop @tap="handleLike(item)">
										<image class="img" v-if="!item.isLike" src="../../static/img/diary/img_zan.png" mode="widthFix"></image>
										<image class="img" v-else src="../../static/img/diary/img_zan_1.png" mode="widthFix"></image>
										<text>{{ item.likeNum }}</text>
									</view>
								</view>
							</view>
						
						</view>
						<view style="margin-top: 20px;"  :class="['card-item',radius ? 'radius' : '']">
							<view class="item-head">
								<view class="left-info">
									<view class="img-wrap flex-center" @tap="toOthers(item.idcontent)">
										<image :src="item.music_pic" mode="widthFix" class="avatar"></image>
									</view>
									<view class="head-name">{{ item.commentNum }}</view>
								</view>
							<!-- 	<text class="color-nine">阅读量：66</text> -->
							</view>
							<view class="content" @tap="toDetails(item.content)">
								<view class="text-content">{{ item.content }}</view>
								
								<view class="bottom-btn padding-bottom-sm">
									<view class="btn-item flex-center" @click="copy(item.commentNum)">
										<image class="img" src="../../static/img/diary/img_say.png" mode="widthFix"></image>
								
									<text >一键复制</text>
									</view>
									<view class="btn-item flex-center" @tap.stop @tap="handleLike1(item)">
										<image class="img" v-if="!item.follow" src="../../static/img/diary/img_zan.png" mode="widthFix"></image>
										<image class="img" v-else src="../../static/img/diary/img_zan_1.png" mode="widthFix"></image>
										<text>{{ item.likeNum1}}</text>
									</view>
								</view>
							</view>
						
						
						
						</view>
					
					
						</view>
						<view class="adContainer" style="width: 100%;" >
						<ad unit-id="adunit-15ca454352b1e36b"  ad-intervals="30"></ad>
						</view>
					</view>
					<!-- 治愈唯美 -->
					<view v-else>
						<view class="margin-bottom" v-for="(item, index) in scList" :key="item.id">
						<view :class="['card-item',radius ? 'radius' : '']">
								<view class="item-head">
									<view class="left-info">
										<view class="img-wrap flex-center" @tap="toOthers(item.idcontent)">
											<image :src="item.music_pic" mode="widthFix" class="avatar"></image>
										</view>
										<view class="head-name">{{ item.title }}</view>
									</view>		</view>
								<view class="content">
									<view class="text-content">{{ item.content }}</view>
									
									<view class="bottom-btn padding-bottom-sm">
										<view class="btn-item flex-center" @click="copy(item.title)">
											<image class="img" src="../../static/img/diary/img_say.png" mode="widthFix"></image>
									
										<text >一键复制</text>
										</view>
										<view class="btn-item flex-center" @tap.stop @tap="handleLike(item)">
											<image class="img" v-if="!item.isLike" src="../../static/img/diary/img_zan.png" mode="widthFix"></image>
											<image class="img" v-else src="../../static/img/diary/img_zan_1.png" mode="widthFix"></image>
											<text>{{ item.likeNum }}</text>
										</view>
									</view>
								</view>
							
							</view>
							<view style="margin-top: 20px;"  :class="['card-item',radius ? 'radius' : '']">
								<view class="item-head">
									<view class="left-info">
										<view class="img-wrap flex-center" @tap="toOthers(item.idcontent)">
											<image :src="item.music_pic" mode="widthFix" class="avatar"></image>
										</view>
										<view class="head-name">{{ item.commentNum }}</view>
									</view>
								<!-- 	<text class="color-nine">阅读量：66</text> -->
								</view>
								<view class="content" @tap="toDetails(item.content)">
									<view class="text-content">{{ item.content }}</view>
									
									<view class="bottom-btn padding-bottom-sm">
										<view class="btn-item flex-center" @click="copy(item.commentNum)">
											<image class="img" src="../../static/img/diary/img_say.png" mode="widthFix"></image>
									
										<text >一键复制</text>
										</view>
										<view class="btn-item flex-center" @tap.stop @tap="handleLike1(item)">
											<image class="img" v-if="!item.follow" src="../../static/img/diary/img_zan.png" mode="widthFix"></image>
											<image class="img" v-else src="../../static/img/diary/img_zan_1.png" mode="widthFix"></image>
											<text>{{ item.likeNum1}}</text>
										</view>
									</view>
								</view>
							
							
							
						</view>
						
						
						</view>
						<view class="adContainer" style="width: 100%;" >
						<ad unit-id="adunit-15ca454352b1e36b"  ad-intervals="30"></ad>
						</view>
					</view>
					<y-LoadMore :status="loadMoreStatus" />
				</view>
			</y-Refresh>

		</view>
	</view>
</template>

<script>
	var that;
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
	export default {
		data() {
			return {
				radius:{
					type: Boolean,
					default: false
				},
				isLike:false,
				startNum: 0,
				activeTab: 0,
				comments: [],
				// tab的名称
				tabList: [{
						title: '网易云热评',
						activeTab: '0'
					},
					{
						title: '暧昧情话',
						activeTab: '1'
					},
					{
						activeTab: '2',
						title: '搞笑神评'
					},
					{
						activeTab: '3',
						title: '社会语录'
					}
				],
				cardList: [{
					id: 1,
					time: '06-17',
					avatarUrl: 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/cat.jpg',
					nickName: '小黄鸭',
					title: ' ',
					follow: false,
					isLike: false,
					likeNum1: Math.ceil(Math.random() * 1000),
					likeNum: Math.ceil(Math.random() * 1000),
					commentNum: ' ',
					imgList: [{
						url: 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/1e942ff08083714184afbf42eba0d87.jpg'
					}]
				}],
				rightList: [{
					id: 2,
					time: '06-17',
					avatarUrl: 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/cat.jpg',
					nickName: '小黄鸭',
					title: ' ',
					follow: false,
					isLike: false,
					likeNum: Math.ceil(Math.random() * 1000),
					likeNum1: Math.ceil(Math.random() * 1000),
					commentNum: ' '
				}],
				gxList: [{
					id: 3,
					time: '06-17',
					avatarUrl: 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/cat.jpg',
					nickName: '小黄鸭',
					title: ' ',
					follow: false,
					isLike: false,
					likeNum: Math.ceil(Math.random() * 1000),
					likeNum1: Math.ceil(Math.random() * 1000),
					commentNum: ' '
				}],
				scList: [{
					id: 4,
					time: '06-17',
					avatarUrl: 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/cat.jpg',
					nickName: '小黄鸭',
					title: ' ',
					follow: false,
					isLike: false,
					likeNum: Math.ceil(Math.random() * 1000),
					likeNum1: Math.ceil(Math.random() * 1000),
					commentNum: ' '
				}],
				loadMoreStatus: 1, //0加载前，1加载中，2没有更多了
				isLike:false
			};
		},
		watch: {
			obj(val) {
				this.list = val;
			}
		},
		onLoad() {
			that = this;
			that.loadData('add');
			// that.rightList = that.$store.state.diary.rightList
			var value = uni.getStorageSync('storage_key');
			console.log(3333, value);
			that.activeTab = value;
				console.log(2233, that.activeTab);
			that.getHomePosts()
			// var script = document.createElement('script');

			// script.type = 'text/javascript';

			// script.src = 'https://sdk.jinrishici.com/v2/browser/jinrishici.js';

			// document.head.appendChild(script);


		},
		onReachBottom() {
			that.startNum++;
			//上滑加载
			this.getHomePosts();
			that.loadData('add');


		},
		methods: {
			//https://api.66mz8.com/api/music.163.php?format=json

			// https://cdn.ipayy.net/wangyy/api.php

			getHomePosts() {


				var that = this;
				uni.request({
					url: 'https://cdn.ipayy.net/wangyy/api.php',
					success: (res) => {
						console.log(res, 22)
						that.comments = res.data.content;
						that.likeNum  =  Math.ceil(Math.random() * 1000)
						that.cardList.forEach((item) => {
							item.title = that.comments

						})

					}
				})

				uni.request({
					url: 'https://api.vvhan.com/api/reping',
					success: (res) => {

						that.comments = res.data.data.content;
						that.cardList.forEach((item) => {
							item.commentNum = that.comments
							item.likeNum = Math.ceil(Math.random() * 1000)
						})

					}
				})
				that.$forceUpdate(); // 暧昧情话
				uni.request({
						url: 'https://api.vvhan.com/api/love?type=json',
						success: (res) => {

							that.comments = res.data.ishan;
							that.rightList.forEach((item) => {
								item.title = that.comments
								item.likeNum  = Math.ceil(Math.random() * 1000)
							})

						}
					}),
					setTimeout(() => {
						uni.request({
							url: 'https://api.vvhan.com/api/love?type=json',
							success: (res) => {

								that.comments = res.data.ishan;
								that.rightList.forEach((item) => {
									item.commentNum = that.comments
	
								item.likeNum1 = Math.ceil(Math.random() * 1000)
								})

							}
						})
					}, 1000)

				// 搞笑神评
				uni.request({
						url: 'https://api.vvhan.com/api/xh?type=json',
						success: (res) => {

							that.comments = res.data.joke;
							that.gxList.forEach((item) => {
								item.title = that.comments
item.likeNum  = Math.ceil(Math.random() * 1000)
							})

						}
					}),
					setTimeout(() => {
						uni.request({
							url: 'https://api.vvhan.com/api/xh?type=json',
							success: (res) => {
								console.log(22, res)
								that.comments = res.data.joke;
								that.gxList.forEach((item) => {
									item.commentNum = that.comments
item.likeNum1 = Math.ceil(Math.random() * 1000)
								})

							}
						})
					}, 1000)
				// 唐诗宋词
				uni.request({
						url: 'https://cdn.ipayy.net/says/new/api.php',
					
						
						success: (res) => {
							console.log(res,'0')
							that.comments = res.data.say;
							that.scList.forEach((item) => {
								item.title = that.comments
item.likeNum  = Math.ceil(Math.random() * 1000)
							})

						}
					}),
					setTimeout(() => {
						uni.request({
							url: 'https://cdn.ipayy.net/says/new/api.php',
							data: {
								code: "json"
							},
							success: (res) => {
								console.log(22, res)
								that.comments = res.data.say;
								that.scList.forEach((item) => {
									item.commentNum = that.comments
item.likeNum1 = Math.ceil(Math.random() * 1000)
								})

							}
						})
					}, 1000)

			},


			loadData(type) {
				if (type === 'add') {
					// 上拉加载
					let list = that.cardList;
					if (list.length == 1) {
						that.loadMoreStatus = 3;
					} else if (list.length > 0) {
						that.cardList = that.cardList.concat({
							id: 2,
							time: '06-17',
							avatarUrl: 'https://6d61-matchbox-79a395-1302390714.tcb.qcloud.la/matchbox/cat.jpg',
							nickName: '小黄鸭',
							title: '洛稚喜欢盛淮南谁也不知道',
							follow: false,
							isLike: false,
							likeNum: '24',
							commentNum: '0',

						});
					} else {
						that.cardList = that.$store.state.diary.cardList

					}
				} else {
					//下拉刷新
					that.$refs.mixPulldownRefresh && that.$refs.mixPulldownRefresh.endPulldownRefresh();
					this.getHomePosts();
				}
			},
			//下拉刷新
			onPulldownReresh() {
				that.loadData('refresh');
				
			},
			handleTab(index) {
			
				that.activeTab = index;

			},
		
			handleLike(item) {
				if (item.isLike) {
				
					item.likeNum--;
				} else {
					item.likeNum++;
		
				}
				item.isLike = !item.isLike;
			},
			handleLike1( item) {
				if (item.follow) {
				
					item.likeNum1--;
				} else {
					item.likeNum1++;
						
				}
				item.follow = !item.follow;
				
			},
			copy(data) {
					uniCopy({
						content: data,
						success: (res) => {
							console.log(res)
							uni.showToast({
								title: res,
								icon: 'success'
							})
						},
						error: (e) => {
							uni.showToast({
								title: e,
								icon: 'none',
								duration: 3000,
							})
						}
					})
				}
		}
	};
</script>

<style lang="less" scoped>
	.radius{
		border-radius: 16rpx;
	}
	.card-item {
		padding: 18rpx 30rpx 0rpx;
		background-color: #ffffff;
		box-shadow: 0 20rpx 40rpx 0 rgba(0, 0, 0, 0.1);
	
		.item-head {
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: space-between;
	
			.left-info {
				display: flex;
				align-items: center;
	
				.img-wrap {
					width: 80rpx;
					height: 80rpx;
					overflow: hidden;
					border-radius: 50%;
	
					.avatar {
						width: 100%;
						height: 80rpx;
					}
				}
	
				.head-name {
					padding-left: 40rpx;
					padding-top: 10rpx;
					color: #666666;
					font-size: 32rpx;
				}
			}
	
			.follow-btn {
				width: 140rpx;
				height: 60rpx;
				border: 1rpx solid var(--mainColor);
				color: var(--mainColor);
				border-radius: 40rpx;
			}
	
			.followed {
				color: #fff;
				background: var(--activeColor);
				border: 1rpx solid var(--activeColor);
			}
		}
	
		.content {
			.text-content {
				padding: 40rpx 0;
				justify-content: space-between;
				color: var(--mainColor);
				font-size: 30rpx;
				text-align: justify;
			}
	
			.img-list {
				display: flex;
				flex-flow: row wrap;
	
				.img-box {
					flex: 0 0 30%;
					margin: 0 1% 1%;
					display: flex;
					align-items: center;
					justify-content: center;
					overflow: hidden;
					height: 200rpx;
					border-radius: 4px;
					background-color: #ececec;
	
					.img {
						width: 100%;
					}
				}
			}
	
			.img-wrap {
				.img-box {
					width: 100%;
					max-height: 400rpx;
					overflow: hidden;
					display: flex;
					align-items: center;
				}
			}
		}
	}
	
	.cont {
		--color: var(--activeColor);
		--count: 1;
	}
	.home {
		padding-top: 90rpx;

		.top-barrage {
			width: 100%;
			height: 320rpx;
			overflow: hidden;
		}

		.card-bottom {
			width: 100%;

			.top-tab {
				display: flex;
				height: 120rpx;
				position: relative;
				top: 0;
				width: 100%;
				z-index: 100;
				background-color: #ffffff;

				.tab-item {
					flex: 1;
					color: #999;
					border-bottom: 4rpx solid #ececec;
				}

				.active {
					color: var(--mainColor);
					border-bottom: 4rpx solid var(--mainColor);
				}
			}
		}
	}
</style>
